import { useEffect, useState } from "react";
import Count from "./components/Count"
import Header from "./components/Header"
import Slot from "./components/Slot"
import UseReducerCom from "./components/UseReducerCom"
import { ThemeContext } from "./utils/ThemeContext";
import type { Theme } from "./types";
import UseRefCom from "./components/UseRefCom";
import EventType from "./components/EventType";
// 对于一些第三方包在安装的时候会出现一些问题，比如lodash，需要安装对应的类型包
// 安装：pnpm i @types/lodash 类型包一般都是以 @types/包名 来安装的
import _ from "lodash";
// 有一些第三方包 内置了 类型定义文件，那么可以直接使用，不需要安装对应的类型包 比如 axios
import axios from "axios";
import AntdTS from "./components/AntdTS";
// 自定义类型包（后续再讲）


interface Banner {
     id: string;
     imgUrl: string;
     hrefUrl: string;
     type: string;
};
interface ResultData {
     code: string;
     msg: string;
     result: Array<Banner>;
};

function App() {

  const [theme,setTheme]=useState<Theme>("system")
  const [banner,setBanner]=useState<Banner[]>([])
  useEffect(()=>{
    const users = {
      name:"张三",
      age:18,
      users:{
        name:"张三",
        age:18
      }
    }
    console.log(_.cloneDeep(users))
    // axios.get("https://api.github.com/users/zhongyangni/repos").then(res=>{
    //   console.log(res.data)
    // })

    {/* TS 约束axios返回值的类型 */}

    axios.get<ResultData>("https://pcapi-xiaotuxian-front-devtest.itheima.net/home/banner").then(res=>{
      const result = res.data
      console.log(result.result)
      setBanner(result.result)
    })

  },[])

  return (
    <>
      <h1>React+TS语法学习</h1>
      
      {/* 组件类型约束 props类型约束 */}
      <Header title="React+TS"></Header>
      {/* props类型约束 插槽类型约束 */}
      <Slot title="Slot">
        <p>Slot:我是插入的内容</p>
      </Slot>
      {/* useState 类型约束 */}
      <Count></Count>
      {/* useContext 类型约束 */}
      <h2>当前系统主题:{theme}</h2>
      <button onClick={()=>setTheme("light")}>切换为浅色</button>
      {/* useReducer 类型约束 */}
      <ThemeContext.Provider value={theme}>
        <UseReducerCom></UseReducerCom>
      </ThemeContext.Provider>
      {/* useRef 类型约束 */}
      <UseRefCom></UseRefCom>
      {/* TS 约束事件类型 */}
      <EventType></EventType>
      {/* TS 约束 antd 组件属性的类型 */}
      <AntdTS></AntdTS>
      <ul>
        {
          banner.map(item=>{
            return <li key={item.id}>
              <a href={item.hrefUrl} target="_blank">
                <img src={item.imgUrl} alt=""/>
              </a>
            </li>
          })
        }
      </ul>




      

      

    </>
  )
}

export default App
